<template>
  <div class="pay">
    <div class="bg_red"></div>
    <div class="line"></div>
    <div class="tiket">
      <h3>交费详情</h3>
      <div class="dashed">
        <img src="@as/img/dashed.png" alt>
      </div>
      <ul class="form">
        <li>
          <p>党员姓名</p>
          <p>{{name}}</p>
        </li>
        <li>
          <p>党支部</p>
          <p>{{org_name}}</p>
        </li>
        <li>
          <p>交费金额</p>
          <p>{{misuse}}元</p>
        </li>
        <li>
          <p>交费月份</p>
          <p>{{create_time|timeType('m')}}月</p>
        </li>
        <li>
          <p>交费截止时间</p>
          <p>{{create_time|timeType('y')}}-{{create_time|timeType('m')}}-{{end_time}} 23:59</p>
        </li>
      </ul>
    </div>
    <div class="ticket_shadow">
      <img src="@as/img/ticket_shadow.png" alt>
    </div>
    <div class="shadow">
      <img src="@as/img/shadow.png" alt>
    </div>
    <mu-button @click="doPaySubmit" class="payBtn" flat data-mu-loading-size="24" :loading="loading">
      微信支付
    </mu-button>
  </div>
</template>

<script>
// import Cookies from 'js-cookie'
// import { time } from '../../utils/index'
export default {
  name: 'App',
  data () {
    return {
      loading: false,
      name: '',
      org_name: '',
      misuse: '',
      create_time: '',
      end_time: ''
    }
  },
  created () {
    if(this.$route.query.id){
      this.id = this.$route.query.id
      this.getPayInfo()
    }else{
      this.getPay()
    }
  },
  methods: {
    async getPay () {
      try {
        let params = {
          uid: JSON.parse(Cookies.get('user_71ydj')).id
        }
        const url = `applets/Pay/pay`
        let res = await this.$http.get(url, params)
        this.$progress.done()
        if (res.code === 200) {
          this.name = res.data.name
          this.org_name = res.data.org_name
          this.misuse = res.data.misuse
          this.create_time = res.data.create_time
          this.end_time = res.data.end_time
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    async getPayInfo () {
      try {
        let params = {
          id: this.id
        }
        const url = `applets/Pay/pay_info`
        let res = await this.$http.get(url, params)
        this.$progress.done()
        if (res.code === 200) {
          this.name = res.data.name
          this.org_name = res.data.org_name
          this.misuse = res.data.misuse
          this.create_time =res.data.create_time
          this.end_time = res.data.end_time
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    async doPaySubmit(){
      try {
        let params = {
          out_trade_no: this.out_trade_no,
          uid: JSON.parse(Cookies.get('user_71ydj')).id,
          openid: window.localStorage.getItem('openId')
        }
        const url = `pay/Pay/pay_order`
        let res = await this.$http.post(url, params)
        if (res.code === 200) {
          this.weixinPay(res.data.data)
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    weixinPay(data){
      if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false);
        }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data)); 
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data));
        }
      }else{
        this.onBridgeReady(data);
      }
    },
    onBridgeReady(data){
      WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": data.appId,      //公众号id，由商户传入     
            "timeStamp": data.timeStamp+'', //时间戳，自1970年以来的秒数     
            "nonceStr": data.nonceStr,   //随机串   
            "package": data.package,    //订单详情扩展字符串
            "signType": data.signType,   //微信签名方式：     
            "paySign": data.sign     //微信签名 
          },
          function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
            window.history.back()
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          }else{
            alert("支付失败！");
          }
      }); 
    },
  }
}
</script>
<style lang="scss" scoped>
.custom-loader {
  animation: loader 1s infinite;
  display: flex;
  i{
    color: #fff;
    font-size: 20px;
  }
}
@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.pay {
  position: relative;
  .bg_red {
    width: 100%;
    height: 193px;
    background: rgba(235, 77, 68, 1);
    margin-bottom: 288px;
  }
  .line {
    z-index: 97;
    position: absolute;
    top: 49px;
    left: 50%;
    transform: translateX(-50%);
    width: 343px;
    height: 12.5px;
    background: rgba(226, 66, 57, 1);
    border-radius: 6px;
  }
  .tiket {
    position: relative;
    z-index: 98;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    width: 329px;
    height: 375px;
    background: rgba(254, 254, 254, 1);
    box-sizing: border-box;
    padding: 23px 11px;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 63px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background-color: #eb4d44;
      transform: translateX(-50%);
    }
    &::before {
      content: "";
      position: absolute;
      right: 0;
      top: 63px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background-color: #eb4d44;
      transform: translateX(50%);
    }
    h3 {
      margin: 0;
      font-size: 18px;
      font-family: PingFang-SC-Medium;
      font-weight: bold;
      color: rgba(217, 49, 40, 1);
      line-height: 46px;
      padding: 0 3px;
      font-family: PingFang-SC-Medium;
      font-weight: bold;
      color: rgba(217, 49, 40, 1);
    }
    .dashed {
      height: 1PX;
      width: 308px;
      margin: 0 auto;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .form {
      padding: 0;
      padding-top: 11px;
      li {
        display: flex;
        justify-content: space-between;
        list-style: none;
        height: 52px;
        line-height: 52px;
        padding: 0 3px;
        p {
          margin: 0;
          &:first-of-type {
            font-size: 15px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
          }
          &:last-of-type{
            font-size:15px;
            font-family:PingFang-SC-Medium;
            font-weight:bold;
            color:rgba(51,51,51,1);
          }
        }
      }
    }
  }
  .ticket_shadow{
    img{
      width: 100%;
      height: 100%;
    }
    z-index: 97;
    position: absolute;
    width: 370px;
    height: 360px;
    top: 107px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }
  .shadow {
    z-index: 99;
    top: 33.5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 361px;
    height: 52px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .payBtn {
    display: block;
    text-align: center;
    width: 329px;
    height: 44px;
    line-height: 44px;
    background: rgba(235, 77, 68, 1);
    border-radius: 4px;
    font-size: 18px;
    font-family: PingFang-SC-Medium;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    margin: 0 auto;
    padding: 0;
  }
}
</style>
